<template>
	<view class="table-list">
		<view class="list-box">
			<view class="title">球桌预约列表</view>
			<view class="list-item" v-for="item in table_Data" :key="item.id">
				<image :src="item.imageUrl"></image>
				<view class="item-info">
					<text>{{ item.name }}</text>
					<text>{{ item.price }} 元/小时</text>
					<text v-if="item.startApptTime && item.endApptTime">可预约时间：{{getHoursAndMinutes(item.startApptTime)}}-{{getHoursAndMinutes(item.endApptTime)}}</text>
					<view @click="goToReservation(item.id)">预定</view>
				</view>
			</view>
			<!-- 加载提示 -->
			<view class="loading-tip" v-if="loading">
				{{ loadingText }}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onReachBottom,
	} from '@dcloudio/uni-app'
	import {
		getProductList
	} from '@/services/product.js'
	const table_Data = ref([]);
	const loading = ref(false);
	const loadingText = ref('加载中...');
	const currentPage = ref(1);
	const pageSize = 10;
	const hasMore = ref(true);

	//格式化可预约时间
	const getHoursAndMinutes = (t) => t?.match(/^\d{1,2}:\d{1,2}/)?.[0].padStart(5, '0') || t;

	const loadData = async (page = 1) => {
		if (!hasMore.value || loading.value) return;
		loading.value = true;
		try {
			const response = await getProductList({
				pageNum: page,
				pageSize: pageSize
			});
			if (response.code === 200) {
				const {
					list,
					total
				} = response.data;
				table_Data.value = [...table_Data.value, ...list];
				currentPage.value = page;
				if (table_Data.value.length >= total || list.length < pageSize) {
					hasMore.value = false;
					loadingText.value = '没有更多数据了';
				} else {
					loadingText.value = '加载中...';
				}
			} else {
				loadingText.value = '加载失败，请重试';
				console.error('数据请求失败:', response.message || '未知错误');
			}
		} catch (error) {
			loadingText.value = '网络错误，请检查网络';
			console.error('请求异常:', error);
		} finally {
			loading.value = false;
		}
	}

	// 上拉加载更多
	onReachBottom(() => {
		if (!hasMore.value || loading.value) return;
		loadData(currentPage.value + 1);
	});

	const goToReservation = (tableId) => {
		uni.navigateTo({
			url: `/pages/list/appointmentDetails?tableId=${tableId}`
		});
	};
	// 页面加载时初始化数据
	loadData();
</script>

<style lang="scss">
	.table-list {
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(110.13deg, rgba(172, 206, 242, 1) 0%, rgba(255, 255, 255, 1) 100%);

		.title {
			font-size: 28px;
			text-align: center;
			margin: 20px 0;
			font-weight: 700;
			color: rgba(81, 89, 245, 1);
		}

		.list-box {
			padding: 15px;

			.list-item {
				background-color: #fff;
				border-radius: 10px;
				display: flex;
				flex-direction: row;
				padding: 15px;
				margin-bottom: 15px;

				image {
					width: 100px;
					height: 100px;
					border-radius: 8px;
					margin-right: 15px;
				}

				.item-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					text:nth-child(1) {
						font-size: 18px;
						font-weight: bold;
					}

					text:nth-child(2) {
						color: #ff668;
						font-size: 16px;
					}

					view {
						align-self: flex-end;
						background-color: #3b82f6;
						color: white;
						padding: 5px 15px;
						border-radius: 20px;
						cursor: pointer;
					}
				}
			}

			.loading-tip {
				text-align: center;
				padding: 15px;
				color: #999;
			}
		}
	}
</style>